<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta charset="utf-8" />
		<meta name="viewport" content="width=640,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta name="format-detection" content="telphone=no, email=no" />
		<meta name="HandheldFriendly" content="true">
		<meta name="MobileOptimized" content="640">
		<meta name="screen-orientation" content="portrait">
		<meta name="x5-orientation" content="portrait">
		<meta name="full-screen" content="yes">
		<meta name="x5-fullscreen" content="true">
		<meta name="browsermode" content="application">
		<meta name="x5-page-mode" content="app">
		<meta name="msapplication-tap-highlight" content="no">
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/components.css" />
		<title></title>
		<style>
			.category{
				height: 100%;
				overflow-y: scroll;
				-webkit-overflow-scrolling : touch !important;
			}
			.category .banner {
				background: url("./images/banner1.png") no-repeat center;
				height: 238px;
				position: relative;
			}
			
			.category .head-img {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				padding: 8px;
				border-radius: 100px;
				background: #FFF;
			}
			
			.category .head-img img {
				border-radius: 100px;
			}
			
			.category .config {
				position: absolute;
				top: 30px;
				right: 30px;
			}
			
			.category .random {
				background: rgba(244, 244, 244, 0.4);
				position: absolute;
				padding: 5px 10px;
				border-radius: 20px;
				right: 28px;
				bottom: 18px;
				color: #585858;
				font-size: 15px;
			}
			
			.category .list li {
				background: url("./images/category7.jpg") no-repeat #FFF right center;
				display: flex;
				margin: 0 30px;
				padding: 28px 0;
				line-height: 60px;
			}
			
			.category .list li+li {
				border-top: 1px solid #d2d2d2;
			}
			
			.category .list li>* {
				flex: 0 0 auto;
				font-size: 22px;
			}
			
			.category .list li>h5 {
				flex: 1 1 auto;
				padding-left: 24px;
			}
			
			.category .list li p {
				padding-right: 28px;
				color: #acacac;
			}
		</style>
	</head>

	<body>
		<div class="category">
			<div class=" play-bar-after">
				<div class="banner">
					<nuxt-link to="/">
						<div class="head-img">
							<img src="./images/head.jpg" alt="">
						</div>
					</nuxt-link>
					<div class="config">
						<img src="./images/config.png" alt="">
					</div>
				</div>
				<ul class="list">
					<li>
						<img src="./images/category0.jpg" alt="">
						<h5>播放历史</h5>
						<p>1500首</p>
					</li>
					<li>
						<img src="./images/category1.jpg" alt="">
						<h5>收藏</h5>
						<p>10首</p>
					</li>
					<li>
						<img src="./images/category2.jpg" alt="">
						<h5>欢乐儿歌</h5>
						<p>50首</p>
					</li>
					<li>
						<img src="./images/category3.jpg" alt="">
						<h5>童话故事</h5>
						<p>42首</p>
					</li>
					<li>
						<img src="./images/category4.jpg" alt="">
						<h5>国学经典</h5>
						<p>100首</p>
					</li>
					<li>
						<img src="./images/category6.jpg" alt="">
						<h5>英语启蒙</h5>
						<p>88首</p>
					</li>
				</ul>
				<!--底部播放栏start-->
				<div class="play-bar">
					<div><img src="./images/playbar0.jpg" alt=""></div>
					<p>设备已连接</p>
					<div><img src="./images/playbar1.jpg" alt=""></div>
					<div><img src="./images/playbar2.jpg" alt=""></div>
					<div><img src="./images/playbar3.jpg" alt=""></div>
				</div>
				<!--底部播放栏end-->
				<!--播放界面start-->
				<div class="play-component" id="play-component">
					<div class="close"><img src="./images/close.jpg" alt=""></div>
					<div class="content">
						<img class="poster" src="./images/demo.jpg" alt="">
						<h3 class="title">不爱睡觉的猴子</h3>
						<div class="btn-g">
							<div><img src="./images/btn-g3_on.png" alt=""></div>
						</div>
						<div class="seekbar-container">
							<span class="left">01：30</span>
							<div class="seekbar">
								<div class="process">
									<img class="seek" src="./images/seek.png" alt="">
								</div>
							</div>
							<span class="right">11：30</span>
						</div>
						<div class="play-g">
							<section><img src="./images/play4.jpg" alt=""></section>
							<section><img src="./images/play1.jpg" alt=""></section>
							<section><img src="./images/play0.jpg" alt=""></section>
							<section><img src="./images/play2.jpg" alt=""></section>
							<section><img src="./images/play3.jpg" alt=""></section>
						</div>
						<div class="volume-container seekbar-container">
							<span class="left"><img src="images/volume1.png" /></span>
							<div class="seekbar">
								<div class="process">
									<img class="seek" src="./images/seek.png" alt="">
								</div>
							</div>
							<span class="right"><img src="images/volume0.png" /></span>
						</div>
					</div>
				</div>
				<!--播放界面end-->
			</div>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script>
			$(function() {
				$('.play-bar').click(function() {
					$('.play-component').addClass('play-show');
				})
				
				$('#play-component .close').click(function(){
					$('.play-component').removeClass('play-show');
				})
			})
		</script>
	</body>

</html>